<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Sisbyte - Soluciones Integrales en Sistemas</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Collapsing Site Navigation with jQuery" />
        <meta name="keywords" content="jquery, navigation, menu, collapsing, accordion, sliding, image, css3"/>
		<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
        <link rel="stylesheet" href="css/columnsStyle.css" type="text/css" media="screen"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script src="js/cufon-yui.js" type="text/javascript"></script>
		<script src="js/Liberation_Sans.font.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/index.js"></script>
        <script src="js/jquery-css-transform.js" type="text/javascript"></script>
        <script src="js/query-animate-css-rotate-scale.js" type="text/javascript"></script>
        
    </head>

    <body>
    <div>
    	<div id="cc_menu" class="cc_menu">
			<div class="cc_item" style="z-index:5; width: 17%;" id="withe1">
				<img src="images/1-1.jpg" alt="image" />
				<span class="cc_title">Servicios</span>
				<div class="cc_submenu">
					<ul>
						<li class="cc_content_1">Mantenimiento y reparacion de equipos de computo</li>
						<li class="cc_content_2">Desarrollo de paginas web</li>
						<li class="cc_content_3">Desarrollo de aplicaciones mobiles</li>
					</ul>
				</div>
			</div>
			<div class="cc_item" style="z-index:4; width: 17%;" id="withe2">
				<img src="images/2-2.jpg" alt="image" />
				<span class="cc_title">Catalogo</span>
				<div class="cc_submenu">
					<ul>
						<li class="cc_content_4">Cataogo en productos</li>
					</ul>
				</div>
			</div>
			<div class="cc_item" style="z-index:3; width: 17%;"id="withe3">
				<img src="images/3-3.jpg" alt="image" />
				<span class="cc_title">Promociones de la semana</span>
				<div class="cc_submenu">
					<ul>
						<li class="cc_content_5">Promociones de la Semana</li>
					</ul>
				</div>
			</div>
			<div class="cc_item" style="z-index:2; width: 17%;" id="withe4">
				<img src="images/4-4.jpg" alt="image" />
				<span class="cc_title">Portafolio</span>
				<div class="cc_submenu">
					<ul>
						<li class="cc_content_6">Nuestra experiencia</li>
					</ul>
				</div>
			</div>
			<div class="cc_item" style="z-index:1; width: 17%;" id="withe5">
				<img src="images/5-5.jpg" alt="image" />
				<span class="cc_title">Ventas</span>
				<div class="cc_submenu">
					<ul>
						<li class="cc_content_7">Ensamblado de Equipos</li>
					</ul>
				</div>
			</div>
			<div class="redes_sociales">
				<div class="menu">
            		<div class="item">
                		<a class="link icon_mail"></a>
                		<div class="item_content">
                    		<h2>Facebook</h2>
                    			<p>Ahora puedes consultar nuestro catálogo desde facebook.</p>
                		</div>
            		</div>
            		<div class="item">
                		<a class="link icon_help"></a>
                		<div class="item_content">
                    		<h2>Twitter</h2>
                    		<p>Para enterarte oportunamente de nuestras promosiones, síguenos en Twitter.</p>
                		</div>
            		</div>
            		<div class="item">
                		<a class="link icon_find"></a>
                		<div class="item_content">
                    		<h2>Google+</h2>
                    		<p>Si te interesa saber mas de nuestros productos y servicios, queda con nosotros a través de Google +</p>
                		</div>
            		</div>
            	</div>
			</div>
			<div id="cc_content" class="cc_content">
				<span id="cc_back" class="cc_back">&lt;&lt;  Regresa</span>
				<div class="cc_content_1">
					<h1>Mantenimiento y reparacion de equipos de computo</h1>
					<p>Reparacion y mantenimientos de equipos de computo...</p>
				</div>
				<div class="cc_content_2">
					<h1>Desarrollo de paginas web</h1>
					<p>Creamos tu sitio web personalizado y damos mantenimiento a tu sitio</p>
				</div>
				<div class="cc_content_3">
					<h1>Desarrollo de aplicaciones mobiles</h1>
					<p>Diseñamos tu app tu la pides y nosotros la diseñamos...</p>
				</div>
				<div class="cc_content_4">
					<h1>Catalogo En Linea</h1>
					<p></p>
				</div>
				<div class="cc_content_5">
					<h1>Prmociones</h1>
					<p></p>
				</div>
				<div class="cc_content_6">
					<h1>Proyectos anteriores:</h1>
					<p></p>
				</div>
				<div class="cc_content_7">
					<h1>Arma tu equipo como lo necesites:</h1>
					<p></p>
				</div>
				<div class="cc_content_8">
					<h1>Our Philosophy</h1>
					<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
				</div>
				<div class="cc_content_9">
					<h1>Bacardi Summer Party</h1>
					<p>I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth</p>
				</div>
				<div class="cc_content_10">
					<h1>Lonestyle Auction</h1>
					<p>To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire</p>
				</div>
				<div class="cc_content_11">
					<h1>Comentarios</h1>
					<p>SisByte.com.mx</p>
						<p>Email:		<input class="login" style="width: 50%; height: 50%"></p>
   						<p>Comentario:  <input type="text" style="width: 50%; height: 50%"></p>
    					<p><button class="menu">Compartir</button></p>
				</div>
				<div class="cc_content_12">
					<h1>Get in touch</h1>
					<p>Winter collection</p>
				</div>
			</div>
		</div>
	</div>
	<div class="footer">
		 <span class="footerSP">2013 Sisbyte Todos los derechos resevados</span>
	</div>
        <script>
        	$('.item').hover(
                function(){
                    var $this = $(this);
                    expand($this);
                },
                function(){
                    var $this = $(this);
                    collapse($this);
                }
            );
            function expand($elem){
                var angle = 0;
                var t = setInterval(function () {
                    if(angle == 1440){
                        clearInterval(t);
                        return;
                    }
                    angle += 40;
                    $('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
                },10);
                $elem.stop().animate({width:'330%', height:'20%'}, 1000)
                .find('.item_content').fadeIn(400,function(){
                    $(this).find('p').stop(true,true).fadeIn(600);
                });
            }
            function collapse($elem){
                var angle = 1440;
                var t = setInterval(function () {
                    if(angle == 0){
                        clearInterval(t);
                        return;
                    }
                    angle -= 40;
                    $('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
                },10);
                $elem.stop().animate({width:'52px', height:'52px'}, 1000)
                .find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut();
            }
        </script>
    </body>
</html>
